<script setup>
import { ref, onMounted } from 'vue';
import { getNewsList ,addClickCount,getTop5News} from '@/api/Multifunction.js'; // 导入查询新闻列表的 API 请求方法
import  {formatDate} from "@/utils/format.js"

const nationalNews = ref([]);
const zhanjiangNews = ref([]);
const globalNews = ref([]);
const nationalPage = ref(1);
const zhanjiangPage = ref(1);
const globalPage = ref(1);
const pageSize = 4;
const totalNational = ref(0);
const totalZhanjiang = ref(0);
const totalGlobal = ref(0);

const fetchNews = async (type, page, listRef, totalRef) => {

  const response = await getNewsList({ pageNum: page, pageSize, type });
  listRef.value = response.data.data.rows;
  totalRef.value = response.data.data.total;
};

onMounted(() => {
  fetchNews(1, nationalPage.value, nationalNews, totalNational);
  fetchNews(2, zhanjiangPage.value, zhanjiangNews, totalZhanjiang);
  fetchNews(3, globalPage.value, globalNews, totalGlobal);
});

const handlePageChange = (type, page) => {
  if (type === 1) {
    nationalPage.value = page;
    fetchNews(1, page, nationalNews, totalNational);
  } else if (type === 2) {
    zhanjiangPage.value = page;
    fetchNews(2, page, zhanjiangNews, totalZhanjiang);
  } else if (type === 3) {
    globalPage.value = page;
    fetchNews(3, page, globalNews, totalGlobal);
  }
};
const top5News = ref([]);

const getTop5 = async () => {
  const response = await getTop5News();
  if (response.data.code === 200) {
    top5News.value = response.data.data;
  }
};
const addClickCount1 = async (id) => {
  await addClickCount(id);
  await getTop5()
};
getTop5()
</script>

<template >
  <div style="display: flex;margin-left: 5%">
    <div >
      <div style="width: 750px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-left: 10%; margin-top: 20px;">
        <div style="font-size: 20px; font-weight: bold; text-align: center"> 全国新闻</div>
        <span style="color:green;font-weight: bold">---------------------------------------------------------------------------------------------------------------------------</span>

        <div v-if="nationalNews.length > 0">
          <el-row v-for="news in nationalNews" :key="news.id" class="news-item" style="margin-left: 20px">
            <el-col :span="24">
              <a :href="news.hyperLinks" target="_blank" class="news-title" @click="addClickCount1(news.id)" :title="news.title">{{ news.title }}</a>
              <p class="news-digest">{{ news.digest }}</p>
              <span class="news-source">{{ news.source }}</span> | <span class="news-date">{{ formatDate(news.pubDate) }}</span>
            </el-col>
          </el-row>
        </div>

        <div v-else style="text-align: center; color: #999; margin: 20px 0;">
          暂无新闻
        </div>

        <el-pagination
            layout="prev, pager, next"
            :current-page="nationalPage"
            :page-size="pageSize"
            :total="totalNational"
            @current-change="(page) => handlePageChange(1, page)"
            style="margin-left: 35%;"
        ></el-pagination>
      </div>


      <!-- 湛江新闻 -->
      <div style="width: 750px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-left: 10%; margin-top: 40px;">
        <div style="font-size: 20px; font-weight: bold; text-align: center">湛江新闻</div>
        <span style="color:green;font-weight: bold">---------------------------------------------------------------------------------------------------------------------------</span>
        <el-divider></el-divider>

        <div v-if="zhanjiangNews.length > 0">
          <el-row v-for="news in zhanjiangNews" :key="news.id" class="news-item">
            <el-col :span="24">
              <a :href="news.hyperLinks" target="_blank" class="news-title" @click="addClickCount1(news.id)" style="margin-left: 20px" :title="news.title">{{ news.title }}</a>
              <p style="margin-left: 20px" class="news-digest">{{ news.digest }}</p>
              <span style="margin-left: 20px" class="news-source">{{ news.source }}</span> | <span class="news-date">{{ formatDate(news.pubDate) }}</span>
            </el-col>
          </el-row>
        </div>

        <div v-else style="text-align: center; color: #999; margin: 20px 0;">
          暂无新闻
        </div>

        <el-pagination
            layout="prev, pager, next"
            :current-page="zhanjiangPage"
            :page-size="pageSize"
            :total="totalZhanjiang"
            @current-change="(page) => handlePageChange(2, page)"
            style="margin-left: 35%;"
        ></el-pagination>
      </div>

      <!-- 全球新闻 -->
      <div style="width: 750px; box-shadow: 0 0 10px rgba(0,0,0,0.1); margin-left: 10%; margin-top: 40px;">
        <div style="font-size: 20px; font-weight: bold; text-align: center">全球新闻</div>
        <span style="color:green;font-weight: bold">---------------------------------------------------------------------------------------------------------------------------</span>
        <el-divider></el-divider>

        <div v-if="globalNews.length > 0">
          <el-row v-for="news in globalNews" :key="news.id" class="news-item">
            <el-col :span="24">
              <a :href="news.hyperLinks" target="_blank" class="news-title" :title="news.title">{{ news.title }}</a>
              <p class="news-digest">{{ news.digest }}</p>
              <span class="news-source">{{ news.source }}</span> | <span class="news-date">{{ formatDate(news.pubDate) }}</span>
            </el-col>
          </el-row>
        </div>

        <div v-else style="text-align: center; color: #999; margin: 20px 0;">
          暂无新闻
        </div>

        <el-pagination
            layout="prev, pager, next"
            :current-page="globalPage"
            :page-size="pageSize"
            :total="totalGlobal"
            @current-change="(page) => handlePageChange(3, page)"
            style="margin-left: 35%;"
        ></el-pagination>
      </div>
    </div>

    <div style="margin-left: 90px;margin-top: 23px;box-shadow: 0 0 10px rgba(0,0,0,0.1);">
      <img  style="width: 400px;height: auto"  src="@/assets/Photo/r1.jpg"  alt="图片加载失败"/>
      <div>
        <p style="font-size: 16px;font-weight: bold;margin-top: 10px;text-align: center">热门新闻</p>
        <el-divider></el-divider>
        <div v-for="news in top5News" :key="news.id" style="margin-top: 10px;margin-bottom: 10px">
          <a :href="news.hyperLinks" target="_blank" class="news-title"  style="margin-left: 10px" :title="news.title">{{ news.title }}</a>
<!--          展示点击量，来源和时间-->
          <div style="margin-top: 5px;color: #999;margin-left: 10px">
            <span style="margin-right: 5px">{{news.clicks}}次点击</span>
            <span style="margin-right: 5px">{{news.source}}</span>
            <span>{{formatDate(news.pubDate)}}</span>
    </div>

  </div>
        <el-divider></el-divider>
      </div>
    </div>
  </div>

</template>

<style scoped>
.news-item {
  margin-bottom: 16px;
}

.news-title {
  font-weight: bold;
  font-size: 16px;
  text-decoration: none;
  color: black;
}

.news-title:hover {
  color: green;
}

.news-digest {
  font-size: 14px;
  color: #666;
}

.news-source,
.news-date {
  font-size: 12px;
  color: #999;
}
</style>
